<?php

/* @var $this \yii\web\View */

use app\assets\QuillEditorAsset;
use yii\helpers\Html;

QuillEditorAsset::register($this);

?>
<script type="text/x-template" id="editor-template">
    <div>
        <quill-editor
                ref="quill_editor"
                :content="myContent"
                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @ready="onEditorReady($event)"
                @change="onEditorChange($event)"
        />
        <input type="file" ref="referenceUpload" @change="referenceUpload" style="display: none;"/>
    </div>

</script>
<script type="text/javascript">
    Vue.use(window.VueQuillEditor)
    // 定义一个名为 share-dialog 的新组件
    Vue.component('editor', {
        props: {
            editorid: String,
            content: String,
        },
        data: function () {
            return {
                editorOption: {
                    formats: [
                        'background',
                        'bold',
                        'color',
                        'font',
                        'code',
                        'italic',
                        'link',
                        'size',
                        'strike',
                        'script',
                        'underline',
                        'blockquote',
                        'header',
                        'indent',
                        'list',
                        'align',
                        'direction',
                        'code-block',
                        'formula',
                        'image',
                        'video'
                    ]
                }
            }
        },
        computed: {
            myContent: function () {
                return this.content
            }
        },
        mounted() {
            // 为图片ICON绑定事件  getModule 为编辑器的内部属性
            this.$refs.quill_editor.quill.getModule('toolbar').addHandler('image', this.imgHandler)
            this.$refs.quill_editor.quill.getModule('toolbar').addHandler('video', this.videoHandler) // 为视频ICON绑定事件
        },
        methods: {
            onEditorBlur(quill) {
                console.log('editor blur!', quill)
            },
            onEditorFocus(quill) {
                console.log('editor focus!', quill)
            },
            onEditorReady(quill) {
                console.log('editor ready!', quill)
            },
            onEditorChange(obj) {
                this.$emit("change", obj)
            },
            // 点击图片ICON触发事件
            imgHandler(state) {
                if (state) {
                    let fileInput = this.$refs.referenceUpload
                    fileInput.click() // 加一个触发事件
                }
            },
            referenceUpload(e) {
                let file = this.$refs.referenceUpload.files[0];
                this.loadImage(file);
                //
            },
            // 点击视频ICON触发事件
            videoHandler(state) {
                // this.addRange = this.$refs.quill_editor.quill.getSelection()
                // if (state) {
                //     let fileInput = document.getElementById('imgInput')
                //     fileInput.click() // 加一个触发事件
                // }
                // this.uploadType = 'video'
            },
            loadImage(file) {
                const suffix = file.name.split('.')
                const ext = suffix.splice(suffix.length - 1, 1)[0]
                let vue = this;
                if (window.FileReader) {
                    let reader = new FileReader();
                    reader.onload = function (e) {
                        console.log(e.target.result);
                        http.post("picture/upload", http.param({
                            pic_data: e.target.result,
                            ext: ext
                        })).then(function (response) {
                            let ret = response.data;
                            console.log(ret);
                            this.fullscreenLoading = false
                            // API: https://segmentfault.com/q/1010000008951906
                            // this.$refs.myTextEditor.quillEditor.getSelection();
                            // 获取光标位置对象，里面有两个属性，一个是index 还有 一个length，这里要用range.index，即当前光标之前的内容长度，然后再利用 insertEmbed(length, 'image', imageUrl)，插入图片即可。
                            let addRange = vue.$refs.quill_editor.quill.getSelection()
                            vue.$refs.quill_editor.quill.insertEmbed(addRange !== null ? addRange.index : 0, 'image', ret.data.picture.pic_url_label, Quill.sources.USER)
                            vue.$refs.referenceUpload.value = null;
                        })
                    }
                    reader.readAsDataURL(file)
                }
            }
        },
        template: '#editor-template'
    });
</script>